<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="绑定手机号" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="phone_box">
			<view class="input_item">
				<u-input v-model="newphone" type="number" :border="false" placeholder="新手机号" />
			</view>
			<view class="input_item">
				<u-input v-model="code" type="text" :border="false" placeholder="请输入手机验证码" />
				<view class="getCode" @tap="getimagesCode">{{tips}}</view>
			</view>
			<view class="lijipay">
				<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="lipay()">确定</u-button>
			</view>
		</view>

		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>

		<u-popup v-model="imgCodeshow" mode="center" width="560" border-radius="20" :mask-close-able="false">
			<view class="imgCodeshow_wrap">
				<view class="imgCodeshow_box">
					<view class="img_input">
						<u-input v-model="imagescode" type="text" :clearable="false" :border="false"
							placeholder="验证码" />
					</view>
					<view class="img_code">
						<image :src="codeimages" @click="getimagesCode()"></image>
					</view>
				</view>
				<view class="queren_Btn">
					<view class="lijipay2">
						<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="getCode()">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!--绑定手机号弹窗-->
		<u-popup v-model="bdingPhone_Show" mode="center" width="550" border-radius="44" :mask-close-able="false">
			<view class="tc_wrap">
				<view class="tc_images">
					<image :src="BestImgUrl + 'me/lhy_success.png'"></image>
				</view>
				<view class="tc_info">
					<view>绑定成功，立即领取</view>
					<view>「一个月VIP会员」</view>
				</view>
				<view class="tc_btn_box">
					<view class="lijipay">
						<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="TobingdingPhone()">领取</u-button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurlBwc,

				bdingPhone_Show: false,
				imgCodeshow: false,

				newphone: '',
				code: '',
				imagescode: '',
				codeimages: '',

				tips: '',
				// refCode: null,
				seconds: 60,
				laiyuan: ''
			}
		},
		onLoad(ops) {
			let laiyuan = ops.laiyuan
			this.laiyuan = laiyuan
		},
		methods: {
			lipay() {
				let that = this
				that.$api.bindPhoneBtn({
					tel: that.newphone,
					code: that.code
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
					
					that.$api.GetuserInfo({
					
					}).then(res => {
						uni.setStorageSync('userinfo', res.data.result)
					}).catch(err => {})
					
					//setTimeout(() => {
					//	that.bdingPhone_Show = true
					//}, 2000)
					
					uni.showToast({
						title: '绑定成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						if(this.laiyuan == "抢单"){
							uni.navigateBack({
								delta: 2
							})
						} else if (this.laiyuan == "userReward"){
							uni.$emit('bindphone', true)
							uni.navigateBack()
						} else {
							uni.navigateBack()
						}
					}, 3000)
					
				}).catch(err => {
					console.log('失败', err.data)
					uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let that = this
				if (that.imagescode == '') {
					uni.showToast({
						title: '请输入图形验证码',
						icon: 'none',
						duration: 2000
					})
				} else {
					that.imgCodeshow = false
					if (that.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							that.$api.getLoginCode({
								tel: that.newphone,
								image_code: that.imagescode
							}).then(res => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								that.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								that.$refs.uCode.start();
							}).catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err.data.msg,
									icon: 'none',
									duration: 2000
								});
							})
						}, 2000);
					} else {
						that.$u.toast('倒计时结束后再发送');
					}
				}
			},
			//获取图片验证码
			getimagesCode() {
				let that = this
				if (that.newphone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
				} else {
					if (that.$refs.uCode.canGetCode) {
						that.imgCodeshow = true
						that.Payloading = false
						that.$api.getimageCode({
							tel: that.newphone,
							type: 'base64'
						}).then(res => {
							that.codeimages = res.data.result.base64
						})
					} else {
						that.$u.toast('倒计时结束后再发送');
					}
				}
			},
			end() {
				//this.$u.toast('倒计时结束');
			},
			start() {
				//this.$u.toast('倒计时开始');
			},
			TobingdingPhone() {
				let that = this
				that.$api.drawMembers({

				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						//uni.switchTab({
						//	url: '/pages/index/index'
						//})
						if(this.laiyuan == "抢单"){
							uni.navigateBack({
								delta: 2
							})
						} else {
							uni.navigateBack()
						}
					}, 3000)
				}).catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						//uni.switchTab({
						//	url: '/pages/index/index'
						//})
						if(this.laiyuan == "抢单"){
							//uni.navigateBack({
							//	delta: 2
							//})
						} else {
							//uni.navigateBack()
						}
					}, 3000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.tc_wrap {
		padding: 0;
		text-align: center;

		.tc_images {
			image {
				width: 100%;
				height: 300rpx;
			}
		}

		.tc_info {
			margin-top: 30rpx;

			view:nth-child(1) {
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 20rpx;
			}

			view:nth-child(2) {
				font-weight: bold;
				color: #FF611E;

				span {
					color: #FF611E;
				}
			}
		}

		.tc_btn_box {
			display: flex;
			align-items: center;
			padding: 30rpx 30rpx 60rpx 30rpx;

			.tc_btn_huise {
				flex: 1;
				margin-right: 12rpx;
				background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
				border-radius: 200rpx;
				padding: 28rpx 0;
				text-align: center;
				color: #333333;
			}

			.tc_btn_huise_err {
				flex: 1;
				background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
				color: #fff;
				border-radius: 200rpx;
				padding: 28rpx 0;
				text-align: center;
			}

			.lijipay {
				width: 300rpx;
				margin-left: 12rpx;
				position: relative;
				margin: 0 auto;

				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
					color: #fff;
				}
			}
		}
	}

	.imgCodeshow_wrap {
		padding: 50rpx 50rpx 40rpx 50rpx;
	}

	.imgCodeshow_box {
		display: flex;
		align-items: center;

		.img_input {
			flex: 1;
			background-color: #f5f5f5;
			border-radius: 18rpx;
			padding: 10rpx 20rpx;
			margin-right: 18rpx;
		}

		.img_code {
			flex: 1;

			image {
				width: 100%;
				height: 90rpx;
			}
		}

		.queren_Btn {
			margin-top: 50rpx;
		}
	}

	.phone_box {
		padding: 30rpx;

		.input_item {
			border-radius: 200rpx;
			background-color: #f9f9f9;
			padding: 20rpx 40rpx;
			margin: 30rpx 0;
			position: relative;
			display: flex;
			align-items: center;

			u-input {
				flex: 1;
			}

			.getCode {
				//position: absolute;
				right: 0;
				top: 0;
				color: #0084FF;
			}
		}
	}

	.lijipay {
		width: 90%;
		margin-top: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 2%;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
			color: #fff;
		}
	}

	.lijipay2 {
		width: 100%;
		margin-top: 30rpx;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
			color: #fff;
		}
	}
</style>